import { defineComponent, ref } from 'vue'

interface IProps {
	msg: string
}

// 组合式api写法
export default defineComponent({
	props: {
		msg: {
			type: String,
			required: true,
		},
	},

	setup() {
		const count = ref(0)

		return (props: IProps) => (
			<div>
				<p>{props.msg}</p>
				<p>{count.value}</p>
			</div>
		)
	},
})

// 类组件的写法
// export default defineComponent({
// 	props: {
// 		msg: {
// 			type: String,
// 			required: true,
// 		},
// 	},

// 	data() {
// 		return {
// 			count: 0,
// 		}
// 	},

// 	render() {
// 		return (
// 			<div>
// 				<div>{this.msg}</div>
// 				<div>{this.count}</div>
// 			</div>
// 		)
// 	},
// })

// 不带状态的tsx组件
// export default () => {
// 	return (
// 		<div>
// 			<h1>foo 函数式组件</h1>
// 		</div>
// 	)
// }
